<template>
  <avatar-clip-mod
      v-model:dialogVisibleCropper="dialogVisibleCropper"
      @confirm="confirm"
      :option="option"
      @update:dialogVisibleCropper="(args: boolean) => dialogVisibleCropper=args">
  </avatar-clip-mod>
  <div class="avatar-editor">
    <div
        class="hj-avatar-uploader" @click="dialogVisibleCropper=true"
    >
      <img
          alt=""
          v-if="moduleItem.dataSource[keyValue].value"
          :src="moduleItem.dataSource[keyValue].value"
          class="avatar"
          width="100%" height="100%"
      />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus/>
      </el-icon>
    </div>
    <div class="tips-box">
      <slot name="label-right"></slot>
      <span>{{ moduleItem.dataSource[keyValue].label || '上传照片' }}</span>
      <p class="tips">头像大小不能超过3M，仅支持（jpg、jpeg、png）格式</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import CONFIG from '@/config';
import appStore from '@/store';
import {ElMessage, UploadProps} from 'element-plus';
import {useGetSelectedModule} from '../../hooks/useGetSelectedModule';
import {IModule} from '@/views/createTemplate/types/IHJNewSchema';
import {Plus} from "@element-plus/icons-vue";
import AvatarClipMod from "@/components/common/AvatarClipMod.vue";
import {uploadAvatar} from "@/http/m_api/user";
import {avatar_path_pre} from "@/assets/ts/constant";
import {loadResumeAvatar, uploadResumeAvatar} from "@/http/m_api/template";

const dialogVisibleCropper = ref(false)

const props = defineProps<{
  modelValue: string;
  label: string;
  keyValue: string;
  module: IModule;
}>();


// 选中的module
const moduleItem = useGetSelectedModule(props.module.id);

const option = ref({
  img: moduleItem.dataSource[props.keyValue].value ? moduleItem.dataSource[props.keyValue].value : require('@/assets/images/people.jpg'),
  autoCropWidth: 120, // 默认生成截图框宽度
  autoCropHeight: 150, // 默认生成截图框高度
  fixedBox: false, // 固定截图框大小 不允许改变
  fixedNumber: [4, 5], // 截图框的宽高比例
  border_radius: '0%'
})
const route = useRoute()
const confirm = async (data: Blob, file: File, url: string) => {
  dialogVisibleCropper.value = false
  const formData = new FormData()
  formData.append('file', data)
  await uploadResumeAvatar(route.params.id, formData)
  URL.revokeObjectURL(option.value.img)
  moduleItem.dataSource[props.keyValue].value = url
  option.value.img = url
}

// const loadData = async () =>{
//   if(!moduleItem.dataSource[props.keyValue].value.startsWith("/")){
//     const img = await loadResumeAvatar(route.params.id);
//     const blob = new Blob([img], { type: "image/jpeg" })
//     const url = URL.createObjectURL(blob);
//     moduleItem.dataSource[props.keyValue].value = url
//     option.value.img = url
//   }
//
// }

onBeforeUnmount(()=>{
  URL.revokeObjectURL(option.value.img)
})

// loadData()

</script>
<style lang="scss" scoped>
.avatar-editor {
  display: flex;
  height: 80px;

  .hj-avatar-uploader {
    height: 100%;
    width: 30%;
    border: 1px dashed gray;

    :deep(.el-upload) {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
      height: 100% !important;
      width: 80px !important;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.hj-avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  text-align: center;
}

.tips-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
  flex: 1;
  height: 100%;
  position: relative;

  span {
    font-size: 16px;
    line-height: 20px;
    color: rgb(130, 139, 162);
    margin-bottom: 2px;
  }

  .tips {
    margin-top: 2px;
    color: #8c939d;
    font-size: 12px;
    margin-top: 5px;
    text-align: justify;
  }

  :deep(.field-label-right-box) {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
